import React, { PureComponent } from 'react';
import { Form, Row, Col, Input, Select, TreeSelect } from 'antd';

const { TextArea } = Input;
const { Option } = Select;
const { TreeNode } = TreeSelect;

export default class Index extends PureComponent {
  genMenusTreeList(data) {
    if (Array.isArray(data) && data.length > 0) {
      return data.map((item) => {
        return (
          <TreeNode value={item.id} title={item.name} key={item.id}>
            {Array.isArray(item.children) && item.children.length > 0 && this.genMenusTreeList(item.children)}
          </TreeNode>
        );
      });
    }
    return null;
  }

  render() {
    const { form, data = {}, menus = [] } = this.props;
    const { getFieldDecorator } = form;

    return (
      <Form layout='vertical'>
        <Row gutter={16} type='flex'>
          <Col span={12}>
            <Form.Item label='编码:'>
              {getFieldDecorator('code', {
                initialValue: data.code || '',
                rules: [{ required: true, message: '该项为必填项' }]
              })(
                <Input placeholder='请输入编码' size='large' />
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label='名称:'>
              {getFieldDecorator('name', {
                initialValue: data.name || '',
                rules: [{ required: true, message: '该项为必填项' }]
              })(
                <Input placeholder='请输入名称' size='large' />
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label='类型:'>
              {getFieldDecorator('type', {
                initialValue: data.type || undefined
              })(
                <Select placeholder='请选择类型' size='large'>
                  <Option value='1'>菜单</Option>
                  <Option value='2'>按钮</Option>
                  <Option value='3'>资源</Option>
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label='是否菜单:'>
              {getFieldDecorator('isMenu', {
                initialValue: data.isMenu || undefined
              })(
                <Select placeholder='请选择是否菜单' size='large'>
                  <Option value='0'>否</Option>
                  <Option value='1'>是</Option>
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label='方法:'>
              {getFieldDecorator('method', {
                initialValue: data.method || undefined
              })(
                <Select placeholder='请选择方法' size='large'>
                  <Option value='GET'>GET</Option>
                  <Option value='POST'>POST</Option>
                  <Option value='DELETE'>DELETE</Option>
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label='上级菜单:'>
              {getFieldDecorator('parentId', {
                initialValue: data.parentId !== '0' ? data.parentId : undefined
              })(
                <TreeSelect
                  allowClear
                  dropdownStyle={{ maxHeight: 250, overflow: 'auto' }}
                  placeholder='请选择上级菜单'
                  size='large'
                >
                  {this.genMenusTreeList(menus)}
                </TreeSelect>
              )}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label='地址:'>
              {getFieldDecorator('uri', {
                initialValue: data.uri || ''
              })(
                <Input placeholder='请输入地址' size='large' />
              )}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label='描述:'>
              {getFieldDecorator('description', {
                initialValue: data.description || ''
              })(
                <TextArea rows={4} placeholder='请输入描述' />
              )}
            </Form.Item>
          </Col>
        </Row>
      </Form>
    );
  }
}